<template>
  <view class="item" :class="data['allotType'] === '2' ? 'invite' : ''">
    <u-row class="row-1" gutter="16">
      <u-col span="7">
        <text class="title"
          >{{ data["sourceLanZh"] }}-{{ data["targetLanZh"] }}</text
        >
      </u-col>
      <u-col span="5" text-align="right">
        <text class="type">{{ data["taskType"] | tastType }}</text>
      </u-col>
    </u-row>
    <u-row class="row-2" gutter="16">
      <u-col span="7">
        <text class="sub-title">{{ content }}</text>
      </u-col>
      <u-col span="5" text-align="right">
        <text class="price"
          >{{ data["currencyType"] | formatMoneyTypeEn }}<text>{{ price }}</text
          >{{ unit }}</text
        >
      </u-col>
    </u-row>
    <u-row class="row-3" gutter="16">
      <u-col span="7">
        <text class="number">NO.{{ data["taskId"] }}</text>
      </u-col>
      <u-col span="5" text-align="right">
        <text class="workload" v-if="unit">实际翻译约{{ workload }}字</text>
      </u-col>
    </u-row>
    <u-row class="row-4" gutter="16">
      <u-col span="7">
        <text class="time">{{ data["requireTime"] | sliceTime }}前返稿</text>
      </u-col>
      <u-col span="5" text-align="right">
        <!-- errorType：(1, "未登录"),(2, "未认证"),(3, "无技能"),(4, "技能不匹配"),(5, "DTP标签不匹配")(0, "正常") -->
        <text v-if="data['errorType'] !== 0" class="status">{{
          data["errorType"] | errorType
        }}</text>
        <template v-else>
          <text v-if="data['receiveTypeOrder'] === 3" class="status"
            >已领完</text
          >
          <template v-if="data['receiveTypeOrder'] === 1">
            <text v-if="data['staffNum'] === userCode" class="status"
              >已领取</text
            >
            <template v-else>
              <u-button
                v-if="data['viewIs']"
                size="small"
                hover-class="none"
                type="primary"
                @click="preview"
                :disabled="disabled"
                >预览</u-button
              >
              <u-button
                size="small"
                hover-class="none"
                type="success"
                @click="receive"
                :disabled="disabled"
                >领取</u-button
              >
            </template>
          </template>
        </template>
      </u-col>
    </u-row>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { baseURL } from "@/config/api-config";
import { receiveTask } from "@/api/task";
export default {
  props: ["data"],
  data() {
    return {
      disabled: false,
      content: "--",
      price: "--",
      unit: "",
      workload: "--",
    };
  },
  computed: {
    ...mapState({
      userCode: (state) => state.userData["userCode"],
    }),
  },
  mounted() {
    const { taskType, workloads = [] } = this.data;
    if (taskType === "1" || taskType === "5") {
      if (workloads.length) {
        this.content = `${workloads[0]["dtpTypeZh"]} ${
          workloads[0]["originWorkload"] + workloads[0]["unit"]
        } ${workloads[0]["unitPrice"]}元/${workloads[0]["unit"]}`;
      }
      this.price = this.data["totalPrice"] || "--";
    } else {
      this.content = this.data["domainZh"];
      this.price = workloads[0]["unitPrice"] || "--";
      this.unit = "千字";
      this.workload = workloads[0]["originWorkload"] || "--";
    }
  },
  methods: {
    // 打开预览，微信小程序会先下载，再打开文件。
    preview() {
      this.disabled = true;
      uni.showLoading({
        title: "正在打开预览",
        mask: true,
      });
      uni.downloadFile({
        url:
          baseURL +
          `/pm/DTPTask/view?fileId=${this.data.fileId}&staffNum=${this.userCode}`,
        success: (res) => {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            success: (res) => {
              console.log("打开文档成功");
            },
            complete: () => {
              this.disabled = false;
              uni.hideLoading();
            },
          });
        },
        fail: () => {
          this.disabled = false;
          uni.hideLoading();
          uni.showToast({
            title: "预览失败，请重试",
            icon: "none",
          });
        },
      });
    },
    // 领取任务，弹框
    receive() {
      const { taskId, taskType } = this.data;
      this.$eventBus.$emit("confirm", {
        data: {
          taskId: taskId,
        },
        executeFn: () => {
          // return Promise
          // confirm组件回调此函数
          return receiveTask({
            staffNum: this.userCode,
            taskId: taskId,
            taskType: taskType,
          }).then((res) => {
            if (res.success) {
              uni.showToast({
                title: "领取成功",
              });
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
            }
            return Promise.resolve(res.success);
          });
        },
      });
    },
  },
};
</script>